<div class="wrapper">
  <h2>
    {{ 'Complete to proceed:' | translate }}
  </h2>

  <div class="container">
    @if (isOtpwUser()) {
      <div class="left-side" [class.step-finished]="wasOneTimePasswordChanged()">
        <mat-card>
          <mat-toolbar-row>
            <h3>{{ 'Set New Password' | translate }}</h3>
          </mat-toolbar-row>

          <ix-change-password-form
            (passwordUpdated)="passwordChanged()"
          ></ix-change-password-form>
        </mat-card>
      </div>
    }

    <div class="right-side" [class.step-finished]="userTwoFactorAuthConfigured()">
      <ix-two-factor></ix-two-factor>
    </div>
  </div>

  @let isOtpwUserCompleted = isOtpwUser() && wasOneTimePasswordChanged() && userTwoFactorAuthConfigured();
  @let isNonOtpwUserCompleted = !isOtpwUser() && userTwoFactorAuthConfigured();
  @if (isOtpwUserCompleted || isNonOtpwUserCompleted) {
    <button
      mat-button
      color="primary"
      matDialogClose
      ixTest="finish-first-stig-login"
    >
      {{ 'Finish' | translate }}
    </button>
  }
</div>
